<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>信达数据中心运维管理自动化平台</title>
    <meta name="keywords" content="信达数据中心运维管理自动化平台">
    <meta name="description" content="信达数据中心运维管理自动化平台">
    <link rel="shortcut icon" href="favicon.ico">
    <link href="../../css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="../../css/iconfont.css" rel="stylesheet">
    <link href="../../css/animate.css" rel="stylesheet">
    <link href="../../css/plugins/datapicker/datepicker3.css" rel="stylesheet">
    <link href="../../css/style.css?v=4.1.0" rel="stylesheet">
    <style type="text/css">
        .ibox-title h5 {
            display: block;
            float: none;
        }

        button {
            margin: 0 5px;
        }

        .input-group {
            width: 30%
        }

        #echarts-panel1 {
            border-right: 1px solid #eee;
        }
    </style>
</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox">
                    <div class="ibox-title">
                        <h5>告警视图</h5>
                    </div>
                    <div class="row mt20 mb20">
                        <div class="col-sm-8 btns">
                            <button type="button" class="col-sm-1 btn btn-primary btn-sm">今日</button>
                            <button type="button" class="col-sm-1 btn  btn-sm">昨天</button>
                            <button type="button" class="col-sm-1 btn  btn-sm">最近七天</button>
                            <button type="button" class="col-sm-1 btn  btn-sm">本月</button>
                            <button type="button" class="col-sm-1 btn  btn-sm">上月</button>
                            <!-- 日期 -->
                            <div class="form-group" id="date">
                                <div class="input-daterange input-group" id="datepicker">
                                    <input type="text" class="input-sm form-control" name="start" value="2014-11-11" />
                                    <span class="input-group-addon">到</span>
                                    <input type="text" class="input-sm form-control" name="end" value="2014-11-17" />
                                </div>
                            </div>
                            <!-- 日期 -->
                        </div>
                        <div class="col-sm-4">
                            <button type="button" class="col-sm-offset-6 col-sm-2 btn btn-warning btn-sm">重置</button>
                            <button type="button" class="col-sm-2 btn btn-success btn-sm">搜索</button>
                        </div>
                    </div>
                    <div class="ibox-content" id="echartsRes">
                        <!-- 仪表盘 饼图 -->
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 基础js -->
    <script src="../../js/jquery.min.js?v=2.1.4"></script>
    <script src="../../js/bootstrap.min.js?v=3.3.6"></script>
    <script src="../../js/content.js?v=1.0.0"></script>
    <!-- 插件js -->
    <script src="../../js/handlebars-v3.0.1.js"></script>
    <script src="../../js/plugins/echarts/echarts-all.js"></script>
    <script src="../../js/plugins/datapicker/bootstrap-datepicker.js"></script>
    <!-- 模板 -->
    <script id="tpl" type="text/x-handlebars-template">
            {{#each echartsInfo}}
            <div class="row mt30">
               <div class="col-sm-8 bdr">
                       {{#each echartsInfoData}}
                        <div class="col-sm-6">
                            <div id="{{echarts-type}}" class="echarts"></div>
                        </div> 
                           {{/each}}          
               </div>
                <div class="col-sm-4">
                    <div id="echarts-pie1" class="echarts"></div>
                </div>
             </div>
             <div class="row">
             <div class="col-sm-8 bdr">
                    <div id="echarts-line" class="echarts"></div>
             </div>
             <div class="col-sm-4">
                    <div id="echarts-pie2" class="echarts"></div>
                </div>
             </div>
             {{/each}}
        </script>
    <!-- 模板 -->
    <script type="text/javascript">
        $(function () {

            // Handlebars模板引擎数据
            var tpl = $("#tpl").html(); //用jquery获取模板
            var template = Handlebars.compile(tpl); //预编译模板


            // ---------- 仪表盘 ----------
            var echartsContext = {
                echartsInfo: [{
                    "echartsInfoData": [
                        { "echarts-type": "echarts-panel1" },
                        { "echarts-type": "echarts-panel2" },
                    ],
                    "echartsInfoNum": [{
                        "num1": "1000",
                        // "des1": "个",
                        "num2": "200",
                        // "des2": "核",
                    },
                    {
                        "num1": "300",
                        // "des1": "T",
                        "num2": "150",
                        // "des2": "T",
                    }
                    ]
                },]
            }
            var echartsRes = template(echartsContext); //匹配json内容
            $("#echartsRes").html(echartsRes); //输入模板

            // 仪表盘
            var panelOption;
            var panel1 = echarts.init(document.getElementById('echarts-panel1'));
            var panel2 = echarts.init(document.getElementById('echarts-panel2'));
            var titleName1 = '解决率';
            var titleName2 = '严重事件';
            // var dataName1 = 'CPU分配率2';
            // var dataName2 = '内存分配率2';
            // var dataName3 = '磁盘分配率2';
            var data1 = [{ value: 50, name: '总数： 1000 未解决： 200' }];
            var data2 = [{ value: 50, name: '已解决： 1000 严重警告： 200' }];

            echartsPanel(titleName1, data1);
            panel1.setOption(panelOption);

            echartsPanel(titleName2, data2);
            panel2.setOption(panelOption);

            function echartsPanel(titleName, dataPanel) {
                panelOption = {
                    title: {
                        text: titleName,
                        // left: "50%",
                        x: "center"
                    },
                    // tooltip: {
                    //     formatter: "{a} <br/>{b} : {c}%"
                    // },
                    series: [{
                        // name: dataName, // 系列名称，用于tooltip显示
                        type: 'gauge', // 系列类型，仪表盘类型
                        title: { // 仪表盘标题。
                            offsetCenter: [0, "125%"], //相对于仪表盘中心的偏移位置
                            color: "#999999", // 文字的颜色,默认 #333。
                            fontSize: 14, // 文字的字体大小,默认 15。
                        },
                        axisTick: {
                            splitNumber: 2,         // 分隔线之间分割的刻度数,默认 5
                            length: 5,              // 刻度线长。支持相对半径的百分比,默认 8。
                        },
                        // grid: {
                        //     left: '40%',
                        //     right: '4%',
                        //     bottom: '-20%',
                        //     containLabel: false
                        // },
                        splitNumber: 10, // 仪表盘刻度的分割段数,默认 10
                        detail: { // 仪表盘详情，用于显示数据
                            formatter: '{value}%', // 格式化函数或者字符串
                            offsetCenter: [0, "80%"], // 相对于仪表盘中心的偏移位置
                            fontSize: 25, // 文字的字体大小
                            color: "#000000" // 文字的颜色,
                        },
                        radius: "65%", //仪表大小
                        axisLine: { // 仪表盘轴线(轮廓线)相关配置
                            lineStyle: { // 仪表盘轴线样式
                                width: 12 // 仪表盘轴线宽度
                            }
                        },
                        axisLabel: { // 刻度标签。
                            distance: 1, // 标签与刻度线的距离,默认 5。
                            fontSize: 10, // 刻度的文字字体大小,默认 5。
                        },
                        splitLine: { // 分隔线样式。
                            length: 20, // 分隔线线长，默认30
                        },
                        pointer: { // 仪表盘指针。
                            length: "80%", // 指针长度，可以是绝对数值，也可以是相对于半径的百分比,默认 80%。
                            width: 5, // 指针宽度,默认 8。
                        },
                        data: dataPanel
                    }]
                };
            }


            // ------------------
            // 饼图

            var pieChart = echarts.init(document.getElementById("echarts-pie1"));

            var pieoption = {
                title: {
                    text: '严重程度分布比例',
                    textStyle: {
                        fontSize: 14,
                        // x: 'center'
                    }

                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    left: 0,
                    top: '20%',
                    data: ['未解决', '已解决', '总数']
                },
                series: [{
                    name: '信息',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: [
                        { value: 335, name: '未解决' },
                        { value: 310, name: '已解决' },
                        { value: 1548, name: '总数' }
                    ],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }]
            };

            pieChart.setOption(pieoption);
            $(window).resize(pieChart.resize);


            // 饼图

            var pieChart = echarts.init(document.getElementById("echarts-pie2"));

            var pieoption = {
                title: {
                    text: '资源事件分布比例',
                    textStyle: {
                        fontSize: 14,
                        // x: 'center'
                    }

                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    left: 0,
                    top: '20%',
                    data: ['主机', '网络设备', '中间件', '数据库', '存储', 'IT设备', '其他']
                },
                series: [{
                    name: '信息',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: [
                        { value: 335, name: '主机' },
                        { value: 310, name: '网络设备' },
                        { value: 234, name: '中间件' },
                        { value: 135, name: '数据库' },
                        { value: 1548, name: '存储' },
                        { value: 1548, name: 'IT设备' },
                        { value: 1548, name: '其他' },
                    ],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }]
            };

            pieChart.setOption(pieoption);
            $(window).resize(pieChart.resize);



            // 折线图1
            var lineChart = echarts.init(document.getElementById("echarts-line"));

            lineoption = {
                title: {
                    text: '折线图堆叠',
                    textStyle: {
                        fontSize: 14,
                        // x: 'center'
                    }
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    top: '10%',
                    data: ['严重', '主要', '次要', '警告']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    name: '严重',
                    type: 'line',
                    stack: '总量',
                    data: [120, 132, 101, 134, 90, 230, 210]
                },
                {
                    name: '主要',
                    type: 'line',
                    stack: '总量',
                    data: [220, 182, 191, 234, 290, 330, 310]
                },
                {
                    name: '次要',
                    type: 'line',
                    stack: '总量',
                    data: [150, 232, 201, 154, 190, 330, 410]
                },
                {
                    name: '警告',
                    type: 'line',
                    stack: '总量',
                    data: [320, 332, 301, 334, 390, 330, 320]
                }
                ]
            };


            lineChart.setOption(lineoption);
            $(window).resize(lineChart.resize);



            // 日期筛选
            $(".btns button").click(function () {
                $(this).addClass('btn-primary').siblings().removeClass('btn-primary');
            });

            $('#date .input-daterange').datepicker({
                keyboardNavigation: false,
                forceParse: false,
                autoclose: true
            });


        })
    </script>
</body>

</html>